
<template>
  <!-- 用来实现频道管理 -->
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell
        title="我的频道"
        :border="false"
      >
        <van-button
          size="mini"
          class="editBtn"
          @click="isEditing=!isEditing"
        >{{isEditing ? "取消" : "编辑"}}</van-button>
      </van-cell>
      <van-grid>
        <!-- 如果当前的下标与传入的curIndex一样，则补充一个类：red  :class="{类名: bool值}" -->
        <van-grid-item
          v-for="(channel,idx) in channels"
          :key="channel.id"
          @click="hClickMyChannel(idx)"
          :class="{red:idx===curIndex}"
        >
          <span>{{channel.name}}</span>
          <!-- 只有当： isEditing为true 并且 不是推荐 ， 显示X -->
          <van-icon
            name="cross"
            class="btn"
            v-show="isEditing&&idx!==0"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell
        title="可选频道"
        :border="false"
      ></van-cell>
      <van-grid>
        <van-grid-item
          v-for="channel in recommendChannels"
          :key="channel.id"
          @click="hAddChannel(channel)"
        >
          <span>{{channel.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannels, delChannel } from '@/api/channel'
export default {
  name: 'ChannelEdit',
  props: ['channels', 'curIndex'],
  data () {
    return {
      isEditing: false, // 是否处于编辑状态
      allChannels: [] // 获取所有频道
    }
  },
  created () {
    this.loadAllChannels()
  },
  computed: {
    // 计算没有订阅的频道
    recommendChannels () {
      // return this.allChannels - this.channels
      return this.allChannels.filter(channel => {
        // 如果当前频道在channels中没有出现过，则保留
        const idx = this.channels.findIndex(item => item.id === channel.id)
        if (idx === -1) {
          return true
        }
      })
    }
  },
  methods: {
    // 用户在我的频道区域，点击了某一个频道
    // 1 正常情况：点了之后，做频道跳转
    // 2 编辑状态: 点了之后，做频道删除
    hClickMyChannel (idx) {
      if (this.isEditing) {
        // 做删除
        this.doDeleteChannel(idx)
      } else {
        this.$emit('change-channel', idx)
      }
    },
    // 删除订阅频道
    async doDeleteChannel (idx) {
      // 如果是推荐结束删除
      if (idx === 0) { return }
      // 1 找到要删除频道的id
      const id = this.channels[idx].id
      try {
        // 2 发送请求
        await delChannel(id)
        this.$toast.success('删除频道成功')
        // 如果你删除的频道在当前的频道之前，则要去更新一下父组件中的 active
        if (idx < this.curIndex) {
          this.$emit('fixed-active-index')
        }
        // 3 更新视图
        //  从我的频道中，把当前项删除
        this.channels.splice(idx, 1)
      } catch (err) {
        console.log(err)
        this.$toast.fail('删除频道失败')
      }
    },
    // 用户在可选频道区域点击了一个频道进行 添加
    async hAddChannel (channel) {
      try {
        // 1 构建参数对象
        const arr = [...this.channels, channel].map((item, idx) => {
          return {
            id: item.id,
            seq: idx
          }
        })
        arr.splice(0, 1) // 删除推荐频道
        // 2 发送请求
        await addChannels(arr)
        // 3 更新视图
        this.channels.push(channel)
        this.$toast.success('操作成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('添加失败')
      }
    },
    async loadAllChannels () {
      try {
        // 发送请求获取所有频道
        const res = await getAllChannels()
        this.allChannels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
// 高亮显示
.red {
  color: red;
  font-weight: bold;
}
.editBtn {
  color: rgb(229, 97, 91) !important;
  margin-right: 10px;
  padding: 0 10px;
  border-color: rgb(229, 97, 91);
}
</style>
